<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      #app,
      #popup {
        height: 100%;
      }
      /* #app {
        
      } */
      .btn{
        width: 100px;
        height: 30px;
        color:#fff;
        margin: 30px;
        border:0;
        border-radius: 6px;
        cursor: pointer;
        background:linear-gradient(to right,black,#b0b0b0)
      }
      #father{
        position: fixed;
        height: 100%;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgb(0, 0, 0,.5);
      }
      #popup {
        background:linear-gradient(to right,black,#b0b0b0)
      }
      #pop {
        width: 300px;
        height: 200px;
        box-sizing: border-box;
        border-radius: 8px;
        background:linear-gradient(to right,#b0b0b0,black)
        /* background:linear-gradient(#2980b9,#2c3e50) ; */
      }
      #pop .title {
        height: 50px;
        line-height: 50px;
        border-top-right-radius: 6px;
        border-top-left-radius: 6px;
        color: #fff;
        padding-left: 15px;
        font-weight: 600;
        font-family: "楷体";
        font-size: 25px;
      }
      #pop .body {
        width: 97%;
        margin: 0 auto;
        height: 100px;
        background-color: #fff;
        text-align: center;
        line-height: 100px;
        font-family: "楷体";
        font-size: 22px;
      }
      #pop .footer {
        text-align: right;
        line-height: 50px;
      }
      #pop .footer button {
        width: 60px;
        height: 30px;
        border: 0;
        border-radius: 6px;
        cursor: pointer;
        font-family: "楷体";
        margin-right: 10px;
        background:linear-gradient(to right,#fff,#b0b0b0)
      }
    </style>
  </head>
  <body>
    <div id="app">
      <button @click="popup" :class=btn>打开弹出框</button>
      <popup @send="send" :choice="isPop"></popup>
    </div>
    <template id="popup">
      <div id="father" v-if=choice>
        <div id="pop">
          <div class="title">提示</div>
          <div class="body">你确定执行此操作嘛？</div>
          <div class="footer">
            <button @click="determine">确定</button>
            <button @click="cancel">取消</button>
          </div>
        </div>
      </div>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
      //需求分析
      //实现一个弹出框
      //定义一个全局的组件
      Vue.component("popup", {
        template: "#popup",
        data() {
          return {
          };
        },
        props:{
            choice:{
                type:Boolean,
                default(){
                    return false
                }
            }
        },
        methods: {
            determine(){
                 this.$emit("send",1)
            },
            cancel(){
                  this.$emit("send",0)
            }
        },
      });
      const vm = new Vue({
        el: "#app",
        data: {
            btn:"btn",
            isPop:false
        },
        methods: {
          popup(){
            this.isPop = true;
          },
          send(input){
            if(input === 0){
                console.log("您取消了操作")
                this.isPop = false;
            }else if(input === 1){
                console.log("您确认了操作")
                this.isPop = false;
            }
           
          }
        },
      });
    </script>
  </body>
</html>
